import React from 'react';
// 自己封装的地区组件
import AreaPicker from '@/components/common/area/areapicker';

const Profile = () => {
    //创建表单的对象结构
    const [form] = React.UI.Form.useForm()
    //初始化的个人资料数据
    const [business] = React.useState({
        nickname: React.Business.nickname,
        mobile: React.Business.mobile,
        email: React.Business.email ? React.Business.email : '',
        gender: React.Business.gender,
        region_text: React.Business.region_text ? React.Business.region_text : '',
        code: React.Business.district ? React.Business.district : '',
        defaultValue: [React.Business.province, React.Business.city, React.Business.district]
    })
    //地区显示
    const [areashow, SetAreashow] = React.useState(false)

    //个人头像数据
    const [avatar, SetAvatar] = React.useState([{
        url: React.Business.avatar_text
    }])

    //地区确认方法
    const AreaConfirm = (val: any, list: any) => 
    {

        SetAreashow(false)

        var code = ''

        for (var item of val) 
        {
            if (item) code = item
        }

        var region_text = ''

        if (list[0]) region_text += `${list[0]}`
        if (list[1]) region_text += `-${list[1]}`
        if (list[2]) region_text += `-${list[2]}`

        //修改数据 对表单中的input元素的值进行数据的修改
        form.setFieldsValue({
            region_text: region_text,
            code: code
        })
        
    }

    //头像上传
    const UploadAvatar = async (file: any) => 
    {
        //覆盖
        React.Business.avatar = file

        return {
            url: URL.createObjectURL(file)
        }
    }

    const OnSubmitEvent = async(values: any) => 
    {
        //组装数据
        values.id = React.Business.id

        //判断是否有上传图片
        if(React.Business.avatar)
        {
            values.avatar = React.Business.avatar
        }

        //获取到选择的地区码
        if(form.getFieldValue('code'))
        {
            values.code = form.getFieldValue('code')
        }

        //判断是否有输入密码，如果没有就删除
        if(!values.password) delete values.password;
        
        //发送请求
        var result = await React.HTTP.upload('/business/UserProfile', values)

        if(result.code == 0)
        {
            React.error(result.msg)
            return false
        }
        else
        {
            //提醒
            React.success(result.msg, () => {

                //覆盖cookie的信息
                React.Cookie.save('business', result.data)

                //修改一下全局的Business用户数据
                React.Business = result.data
                React.SetBusiness(result.data)

                //返回上一个界面
                React.navigate(-1)
            })
        }
    }

    return (
        <>
            {/* 地区组件 */}
            <AreaPicker defaultValue={business.defaultValue} visible={areashow} onClose={() => SetAreashow(false)} onConfirm={AreaConfirm} />

            {/* 表单结构 */}
            <React.UI.Form
                name="profile"
                layout='horizontal'
                mode='card'
                form={form}
                initialValues={business}
                onFinish={OnSubmitEvent}
                footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
            >
                <React.UI.AutoCenter style={{ margin: '30px 0px' }}>
                    <React.UI.ImageUploader value={avatar} maxCount={1} onChange={SetAvatar} upload={UploadAvatar} />
                </React.UI.AutoCenter>

                <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                    <React.UI.Input placeholder="请输入手机号" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="password" label="密码">
                    <React.UI.Input type="password" placeholder="请输入密码" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
                    <React.UI.Input placeholder="请输入邮箱" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

                <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetAreashow(true)}>
                    <React.UI.Input placeholder="请选择地区" readOnly />
                </React.UI.Form.Item>
            </React.UI.Form>
        </>
    )
}
export default Profile;